<template>
  <div>
    <hr />
    <div id="remarkItem">
      <div class="left">
        <div class="img">
          <img :src="CurrImg" alt="" />
        </div>
      </div>
      <div class="right">
        <div>
          <span>{{ username }}</span>
          <span>{{ format }}</span>
          <span @click="showRecomment">回复</span>
        </div>
        <p>{{ formatContent }}</p>
        <recomments :commentId="id" ref="recomment"></recomments>
      </div>
    </div>
    <!-- <transition name="fadeIn">
      <tip v-if="delRemarkShow" :text="textTip" @config="configDel" @cancel="cancelDel"></tip>
    </transition>-->
  </div>
</template>

<script setup lang="ts">
import { formatTime } from "../../formatTime";
import recomments from "../recommend/recomment.vue";
import { ref, defineProps, computed } from "vue";
import $axios from "@/http";
import { useUserStore } from "@/store";
const $store = useUserStore();
const props = defineProps(["username", "goodNum", "time", "content", "id", "CurrImg"]);

const showMsg = ref<boolean>(false);
const delRemarkShow = ref<boolean>(false);
const isShowColor = ref<boolean>(false);
const remarkGoodNum = ref<number>(0);
const recomment = ref<any>(null);

const format = computed(() => {
  return formatTime(props.time);
});
const formatContent = computed(() => {
  return props.content.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
});
//展示回复的输入框
const showRecomment = () => {
  console.log(recomment.value.showRecomment);

  recomment.value.showRecomment = !recomment.value.showRecomment;
  recomment.value.recommentUser = "@" + props.username;
};
const showColor = () => {
  isShowColor.value = true;
  $axios
    .post("/comment/update", {
      id: props.id,
      goodNum: props.goodNum + 1,
    })
    .then((res) => {
      remarkGoodNum.value = remarkGoodNum.value + 1;
    });
};
const showDel = () => {
  delRemarkShow.value = true;
};
const configDel = () => {
  delRemark();
  delRemarkShow.value = false;
};
const cancelDel = () => {
  delRemarkShow.value = false;
};
const delRemark = () => {
  $axios
    .post("/comment/del", {
      id: props.id,
      username: $store.user.username,
    })
    .then((res) => {
      console.log(res);
      if (res.data.error === -1) {
      }
    });
};
// getAllRemark() {
//   $axios
//     .get("/comment/search", {
//       params: {
//         blogId: $route.params.id,
//       },
//     })
//     .then((res) => {
//       console.log(res);
//       if (res.data.error === -1) {
//         remarkContent = res.data.data;
//         $emit("restartSearch", res.data.data);
//       } else if (res.data.error === 0) {
//         $emit("restartSearch", false);
//       }
//     });
// },
</script>

<style lang="scss" scoped>
@import url("../../css/comment/animate.css");
// @media screen and (max-width: 765px) {
//   .right {
//     div {
//       span {
//         margin: 0 5px;
//       }
//     }
//   }
// }
// @media screen and (min-width: 765px) {
.right {
  div {
    span {
      margin: 0 15px;
    }
  }
}
// }
.showColor {
  color: #fb7299;
}
#remarkItem {
  padding: 15px;
  display: flex;
  // justify-content: space-between;
  .left {
    text-align: center;
    margin-right: 10px;
    .img {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    p {
      margin-top: 10px;
      transition: all 0.5s;
      &:hover {
        color: #e5e5e5;
      }
    }
  }
  .right {
    width: 90%;
    div {
      span {
        // margin: 0 15px;
        transition: all 0.4s;
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
        &:nth-child(1) {
          font-size: 16px;
          color: #333;
        }
        &:nth-child(3) {
          &:hover {
            color: salmon;
          }
        }
      }
    }
    p {
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 15px;
      font-size: 14px;
      font-weight: normal;
      color: #636363;
    }
  }
}
</style>
